<template>
  <div class="container">
    <!-- 弹出框区域 -->
    <!-- 1.单选题 -->
    <div v-if="questionType === '1'">
      <!-- 标题信息区域 -->
      <div class="headerInformation" type="flex" justify="space-around">
        <el-row>
          <el-col :span="6"
            >【题型】:
            {{
              questionType == 1 ? "单选" : questionType == 2 ? "多选" : "简答"
            }}</el-col
          >
          <el-col :span="6">【编号】:{{ previewlist.id }}</el-col>
          <el-col :span="6"
            >【难度】:
            {{
              previewlist.difficulty === "1"
                ? "简单"
                : previewlist.difficulty === "1"
                ? "一般"
                : "困难"
            }}
          </el-col>
          <el-col :span="6">【标签】:{{ previewlist.tags }}</el-col>
        </el-row>
        <el-row style="margin-bottom: 5px">
          <el-col :span="6">【学科】:{{ previewlist.subjectName }}</el-col>
          <el-col :span="6">【目录】:{{ previewlist.directoryName }}</el-col>
          <el-col :span="6">【方向】:{{ previewlist.direction }}</el-col>
        </el-row>
      </div>
      <!-- 题干区域 -->
      <div class="questionStem">
        <el-row>
          <div
            v-html="
              `【题干】: <div style = 'color: #0101ff'>${previewlist.question}</div>`
            "
          ></div>
          <div>
            单选题选项：(以下选中的选项为正确答案)
          </div>
          <el-radio-group v-model="radio">
            <el-radio
              :label="item.isRight"
              v-for="(item, index) in previewlist.options"
              :key="index"
              style="display: block"
              >{{ item.code }}</el-radio
            >
          </el-radio-group>
        </el-row>
      </div>
      <!-- 参考答案区域 -->
      <el-row class="answer">
        【参考答案】：<el-button type="danger" @click="show"
          >视频答案预览</el-button
        >
        <!-- 视频播放区域 -->
        <div v-if="isvideoshow">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player>
        </div>
      </el-row>
      <el-row class="answerParsing">
        【答案解析】：{{ previewlist.answerID }}
      </el-row>
      <el-row> 【题目备注】：{{ previewlist.remarks }} </el-row>
    </div>

    <!-- 1.多选题 -->
    <div v-else-if="questionType === '2'">
      <!-- 标题信息区域 -->
      <div class="headerInformation" type="flex" justify="space-around">
        <el-row>
          <el-col :span="6"
            >【题型】:
            {{
              questionType == 1 ? "单选" : questionType == 2 ? "多选" : "简答"
            }}</el-col
          >
          <el-col :span="6">【编号】:{{ previewlist.id }}</el-col>
          <el-col :span="6"
            >【难度】:
            {{
              previewlist.difficulty === "1"
                ? "简单"
                : previewlist.difficulty === "1"
                ? "一般"
                : "困难"
            }}
          </el-col>
          <el-col :span="6">【标签】:{{ previewlist.tags }}</el-col>
        </el-row>
        <el-row style="margin-bottom: 5px">
          <el-col :span="6">【学科】:{{ previewlist.subjectName }}</el-col>
          <el-col :span="6">【目录】:{{ previewlist.directoryName }}</el-col>
          <el-col :span="6">【方向】:{{ previewlist.direction }}</el-col>
        </el-row>
      </div>
      <!-- 题干区域 -->
      <div class="questionStem">
        <el-row>
          <div
            v-html="
              `【题干】: <div style = 'color: #0101ff'>${previewlist.question}</div>`
            "
          ></div>
          多选题选项：(以下选中的选项为正确答案)

          <el-checkbox-group
            v-model="checkList" 
          >
            <el-checkbox :label="item.isRight" v-for="(item, index) in previewlist.options"
            :key="index" style="display:block">{{ item.code }}</el-checkbox>
          </el-checkbox-group>
        </el-row>
      </div>
      <!-- 参考答案区域 -->
      <el-row class="answer">
        【参考答案】：<el-button type="danger" @click="show"
          >视频答案预览</el-button
        >
        <!-- 视频播放区域 -->
        <div v-if="isvideoshow">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player>
        </div>
      </el-row>
      <el-row class="answerParsing">
        【答案解析】：{{ previewlist.answerID }}
      </el-row>
      <el-row> 【题目备注】：{{ previewlist.remarks }} </el-row>
    </div>

    <!-- 1.简答题 -->
    <div v-else>
      <!-- 标题信息区域 -->
      <div class="headerInformation" type="flex" justify="space-around">
        <el-row>
          <el-col :span="6"
            >【题型】:
            {{
              questionType == 1 ? "单选" : questionType == 2 ? "多选" : "简答"
            }}</el-col
          >
          <el-col :span="6">【编号】:{{ previewlist.id }}</el-col>
          <el-col :span="6"
            >【难度】:
            {{
              previewlist.difficulty === "1"
                ? "简单"
                : previewlist.difficulty === "1"
                ? "一般"
                : "困难"
            }}
          </el-col>
          <el-col :span="6">【标签】:{{ previewlist.tags }}</el-col>
        </el-row>
        <el-row style="margin-bottom: 5px">
          <el-col :span="6">【学科】:{{ previewlist.subjectName }}</el-col>
          <el-col :span="6">【目录】:{{ previewlist.directoryName }}</el-col>
          <el-col :span="6">【方向】:{{ previewlist.direction }}</el-col>
        </el-row>
      </div>
      <!-- 题干区域 -->
      <div class="questionStem">
        <el-row>
          <div
            v-html="
              `【题干】: <div style = 'color: #0101ff'>${previewlist.question}</div>`
            "
          ></div>
        </el-row>
      </div>
      <!-- 参考答案区域 -->
      <el-row class="answer">
        <div class="yulan">
        【参考答案】：<el-button type="danger" @click="show"
          >视频答案预览</el-button
        >
        </div>
        <!-- 视频播放区域 -->
        <div class="videoplay" v-if="isvideoshow">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player>
        </div>
      </el-row>
      <el-row class="answerParsing">
        【答案解析】：{{ previewlist.answerID }}
      </el-row>
      <el-row> 【题目备注】：{{ previewlist.remarks }} </el-row>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
// import VideoPlayer from "vue-video-player";
// require("video.js/dist/video-js.css");
// require("vue-video-player/src/custom-theme.css");
// Vue.use(VideoPlayer);

export default {
  name: "dialogComponent",
  props: {
    questionType: {
      type: [String, Number],
      required: true
    },
    previewlist: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    show() {
      this.isvideoshow = true;
      console.log(this.previewlist.videoURL);
      if (this.previewlist.videoURL) {
        this.playerOptions.sources[0].src = this.previewlist.videoURL;
        this.playerOptions.sources[0].type = "video/mp4";
        console.log(this.playerOptions.sources[0].src, "URL");
      }
    }
  },
  data() {
    return {
      radio: 1,
      checkList: [1],
      videoAdress: this.previewlist.videoURL,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "" //url地址
          }
        ],
        poster: "../../static/images/test.jpg", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        }
      },
      isvideoshow: false
    };
  },
  mounted() {
    console.log(this.previewlist);
    // this.radio = previewlist.
  }
};
</script>

<style scoped lang="less" scoped>
.headerInformation,
.questionStem,
.answer,
.answerParsing {
  border-bottom: 1px solid #ccc;
  margin-bottom: 5px;
  padding: 10px 0;
}
/deep/.yulan {
  margin-bottom: 15px;
}
.confirm {
  text-align: center !important;
}
.confirmBtn {
  margin-top: 15px;
}
/deep/.vjs_video_3-dimensions {
width: 450px;
height: 150px;
}
/deep/ video {
  object-fit:fill;
}
</style>
